<template>
    <div class="news-page" v-loading="loading">
        <!-- <div class="news-t">
            <div class="big">
                <img :src="content1.photo" alt="" @click="goContent('/alleviation_content/'+content1.id)">
            </div>
            <div class="small">
                <div class="news-small" @click="goContent('/alleviation_content/'+content2.id)">
                    <img :src="content2.photo" alt="">
                    <span class="name">{{content2.title}}</span>
                </div>
                <div class="news-small" @click="goContent('/alleviation_content/'+content3.id)">
                    <img :src="content3.photo" alt="">
                    <span class="name">{{content3.title}}</span>
                </div>
            </div>
            <div style="clear:both"></div>
        </div> -->
        <div class="news-main">
            <div class="news-item" v-for="(item,index) in newList">
                <div class="news-left">
                    <span class="month">{{item.date}}</span>
                    <span class="year">{{item.year}}</span>
                    <!-- <span class="iconfont icongengduo"></span> -->
                    <!-- <span class="iconfont icongengduo" @click="goContent('/news_content/'+item.id)"></span> -->
                </div>
                <div class="news-right" @click="goContent('/newsContent/'+item.id)" title="点击查看详情">
                    <h3 class="name">{{item.title}}</h3>
                    <p class="content">
                        {{item.introduction}}
                    </p>
                    <span class="iconfont iconyanjing">{{item.watchCount}}</span>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="10" v-show="newList.length!=0"></ui-pagination>
        <nodata v-show="newList.length==0 && start"></nodata>
    </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import nodata from '@/components/nodata.vue'
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            total:null,
            pageSize:10,
            pageNo:1,
            newList:[],
            start:false,
            content1:{},
            content2:{},
            content3:{},
            loading:false,
            type:'1269154933620690944'
        }
    },
    created(){
        // if(this.$store.state.type!=""){
        //     this.type = this.$store.state.type;
        // }
        this.getData();
    },
    mounted(){

    },
    watch:{
        // '$store.state.type':function(newFlag, oldFlag){
        //     console.log(newFlag)
        //     this.newList = [];
        //     this.type = newFlag;
        //     this.pageNo = 1;
        //     this.getData();
        // }
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getData(){
            console.log(1222)
            let that = this;
            this.loading = true;
            this.$axios.$get("/f/pageNews?pageNo="+this.pageNo+"&pageSize=10")
            .then(function (response) {
                console.log(response,3333333)
                let list = response.data.dtoPage.list;
                list.forEach((item,i)=>{
                    item.year = item.createDate.substring(0,4)
                    item.date = item.createDate.substring(5,10)
                    if(!item.watchCount){
                        item.watchCount = 0;
                    }

                })
                that.newList = list;
                that.total = response.count;
                // if(list.length!=0){

                //     list.forEach((item,i)=>{
                //         that.newList.push(item)
                //     })
                // }
                that.start = true;
                that.loading = false;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        goPage(){

        },
        goContent(url){
            this.$router.push(url);
        },
        pageChange(index){

        }
    }
}
</script>

<style lang="less">
    .news-page{
        width:100%;
        margin-bottom:40px;
        min-height:500px;
        .news-main{
            margin:0 auto;
            width:100%;
            .news-item{
                width:100%;
                margin-top:20px;
                box-sizing:border-box;
                padding:20px 30px;
                border:1px dashed #d8d5d5;
                display:flex;
                .news-right{
                    cursor: pointer;
                    width:calc(100% - 205px);
                    margin-left:20px;
                    float:right;
                    .name{
                        line-height:40px;
                        font-size:20px;
                        color:#555555;
                    }
                    .content{
                        height:75px;
                        line-height:25px;
                        font-size:16px;
                        color:#888888;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                        width:100%;
                    }
                    .iconfont{
                        font-size:14px;
                        color:#999999;
                    }
                    .iconfont:before{
                        margin-right:5px;
                    }
                }
                .news-left{
                    width:180px;
                    height:140px;
                    padding-right:30px;
                    box-sizing:border-box;
                    padding-left:30px;
                    border-right:1px #d8d5d5 dashed;
                    float:left;

                    .month{
                        display:block;
                        width:100%;
                        line-height:40px;
                        color:#555555;
                        font-size:30px;
                        font-weight:600;
                        margin-top:10px;
                    }
                    .year{
                        display:block;
                        width:100%;
                        line-height:30px;
                        color:#888888;
                        font-size:16px;
                    }
                    .iconfont{
                        display:block;
                        width:30px;
                        height:30px;
                        line-height:28px;
                        text-align:center;
                        font-size:18px;
                        font-weight:600;
                        color:#666666;
                        border-radius:50%;
                        border:1px solid #555555;
                        margin-top:20px;
                        cursor:pointer;
                    }
                    .iconfont:hover{
                        color:#17a2b8;
                        border-color:#17a2b8;
                    }
                }
            }
        }
        .news-t{
            width:1250px;
            margin:0 auto;
            display:flex;
            justify-content:space-between;
            margin-top:35px;
            .big{
                width:860px;
                height:400px;
                position:relative;
                cursor:pointer;
                float:left;
                margin-right:20px;
                img{
                    width:100%;
                    height:100%;
                    display:block;
                }
            }
            .small{
                width:370px;
                height:400px;
                float:left;
                .news-small{
                    position:relative;
                    width:100%;
                    height:190px;
                    cursor:pointer;
                    .name{
                        width:100%;
                        display:block;
                        position:absolute;
                        left:0;
                        bottom:20px;
                        height:30px;
                        line-height:30px;
                        text-align:center;
                        font-size:14px;
                        background:rgba(0,0,0,.6);
                        color:#fff;
                    }
                    img{
                        width:100%;
                        height:100%;
                        display:block;
                    }
                }
                .news-small:first-child{
                    margin-bottom:20px;
                }
            }
        }
    }


</style>
